import {Component} from "react";
import { AtIcon,AtAvatar,AtButton,AtFloatLayout } from 'taro-ui'
import Taro,{Current} from '@tarojs/taro'
import {Image, Swiper, SwiperItem, View} from '@tarojs/components'
import './ShopDetail.css'
import axios from 'axios'
import api from '../../api'
import qs from 'qs'
class ShopDetail extends Component {
  state={
    goodsId:24,
    goodsName:'',//商品名称
    goodsRealPrice:'',//商品价格
    goodsSellNumber:'',//销量
    lunboArr:[],//轮播图片
    shopAddress:'',//发货地址
    shopName:'',//店铺名字
    shopLogo:'',//店铺头像
    goodsDescText:[],//商品详情图片
    tuiJianArr:[],//推荐商品
    activeIsOpened:false,//弹框是否打开
    selectInfo:[],//选择内容
    tanContent:[''],//弹框内容
    selShopName:'',//选择弹框内商品名字
    motalTile:'',
    sizeIndex:0,//选择尺寸的下标
    isClickSize:false,//是否点击了颜色
    pinlun:'',//评论
    cardNum:1,//加入购物车数量
    userId:32,//用户id
    isMotal:'选择',
  }
  //点击活动事件
  activity=()=>{
    let str=this.state.tanContent.map(item=>{
        return(
          <div>
            <div className='juan'>
              <div>
                <p className='juanPrice'>￥<span>80</span>店铺优惠劵</p>
                <p>订单满400元时使用（不含邮费） </p>
                <p> 使用期限 2021.03.25-2021.04.20 </p>
              </div>
              <div>
                <AtButton circle>立即领取</AtButton>
              </div>
            </div>
            <div className='juan'>
            <div>
              <p className='juanPrice'>￥<span>80</span>店铺优惠劵</p>
              <p>订单满400元时使用（不含邮费） </p>
              <p> 使用期限 2021.03.25-2021.04.20 </p>
            </div>
            <div>
              <AtButton circle>立即领取</AtButton>
            </div>
          </div>
            <div className='juan'>
            <div>
              <p className='juanPrice'>￥<span>80</span>店铺优惠劵</p>
              <p>订单满400元时使用（不含邮费） </p>
              <p> 使用期限 2021.03.25-2021.04.20 </p>
            </div>
            <div>
              <AtButton circle>立即领取</AtButton>
            </div>
          </div>
            <div className='juan'>
            <div>
              <p className='juanPrice'>￥<span>80</span>店铺优惠劵</p>
              <p>订单满400元时使用（不含邮费） </p>
              <p> 使用期限 2021.03.25-2021.04.20 </p>
            </div>
            <div>
              <AtButton circle>立即领取</AtButton>
            </div>
          </div>
          </div>
        )
    })
    this.setState({
      activeIsOpened:true,
      tanContent:str,
      motalTile:'优惠'
    })
  }
  //点击服务事件
  serveMotal=()=>{
    let str=this.state.tanContent.map(item=>{
      return(
        <ul>
          <li>
            <h4>假一赔四</h4>
            <p>正品保障，假一赔四</p>
          </li>
          <li>
            <h4>上门取退</h4>
            <p>预约上门取件，最快1小时上门，取件后急速退款到账</p>
          </li>
          <li>
            <h4>急速退款</h4>
            <p>满足相应条件时，诚信用户在退货寄出后，享受急速退款到账</p>
          </li>
          <li>
            <h4>七天无理由退换</h4>
            <p>满足相应条件（吊牌缺失，洗涤后不支持）时，消费者可申请“7天无理由退换货”</p>
          </li>
          <li>
            <h4>公益宝贝</h4>
            <p>购买该商品，每笔成交都会有相应的金额捐赠给公益，感谢您的支持，愿公益的快乐伴随您每一天</p>
          </li>
        </ul>
      )
    })
    this.setState({
      activeIsOpened:true,
      tanContent:str,
      motalTile:'基本保障'
    })
  }
  //得到参数
  getCanShu(){
    //  参数
    return  new  Promise((resolve, reject) => {
       axios.get(api.shopDetail.selectSize+this.state.goodsId).then(res=>{
         if(res.data.code==2000){
           resolve(res.data.data)
         }
       })
     })
  }
  //选择颜色
  selSize=(i)=>{
    this.setState({
      sizeIndex:i,
      isClickSize:true
    },()=>{
      if(this.state.isMotal==='选择'){
        this.selectMotal()
      }else {
        this.addCart()
      }
    })
  }
  //选择弹框
  selectMotal=()=>{
    //  参数
    let str = this.state.tanContent.map((item,index) => {
      return (
        <div>
          <div className='sizeHeader'>
            <div className='sizeHeaderTitle'>{this.state.selectInfo[this.state.sizeIndex].goodsName}</div>
            <div>
              <div className='sizeHeaderPrice'>
                ￥{this.state.selectInfo[this.state.sizeIndex].goodsRealPrice}
              </div>
              <div className='sizeNum'>
                库存 <span>{this.state.selectInfo[this.state.sizeIndex].goodsNumber}</span>件
              </div>
            </div>
          </div>
          <div>颜色分类</div>
          <div className='colorImg'>
            {this.state.selectInfo.map((item,index)=>{
              return (
                <div className='colorItem' onClick={()=>{this.selSize(index)}}>
                  <div>
                    <Image
                    style={'width:100px;height:100px;border: 1px solid white'}
                    src={'http://172.17.6.224:8085'+item.picOne}/>
                  </div>
                  <div className='colorTitle'>
                    {item.goodsColor}
                  </div>
                </div>
                )
              })
            }
          </div>
          <div>尺码</div>
          <div className='sizeAll'>
            { this.state.isClickSize===false && this.state.selectInfo.map(item=>{
                return(
                  <div>
                    {item.goodsSize}
                  </div>
                )
              })}
            {this.state.isClickSize===true && <div>{this.state.selectInfo[this.state.sizeIndex].goodsSize}</div>}
          </div>
        </div>
      )
    })
    this.setState({
      activeIsOpened:true,
      tanContent:str,
      motalTile:'商品规格',
      isMotal:'选择'
    })
  }
  //参数弹框
  canShuMotal=()=>{
    let str=this.state.tanContent.map(item=>{
      return(
        <div>
          <div className='goodBrand'>
            <div>品牌</div>
            <div>{this.state.selectInfo[0].goodsBrand}</div>
          </div>
          <div className='goodBrand'>
            <div>尺码</div>
            <div className='goodSize'>
              {this.state.selectInfo.map(item=>{
                return(
                  <div>
                    {item.goodsSize}
                  </div>
                )
              })}
            </div>
          </div>
          <div className='goodBrand'>
            <div>颜色</div>
            <div className='goodSize'>
              {this.state.selectInfo.map(item=>{
                return(
                  <div>
                    {item.goodsColor}
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      )
    })
    this.setState({
      activeIsOpened:true,
      tanContent:str,
      motalTile:'产品参数'
    })
  }
  //点击评论
  goToPinLun=()=>{
    Taro.navigateTo({
      url:'/pages/PinLun/PinLun?goodsId='+this.state.goodsId
    })
  }
  //点击推荐商品跳转
  goodsTuiJian=(id)=>{
    console.log(event)
    Taro.pageScrollTo({
      scrollTop: 0,
      duration: 10
    })
    this.setState({
      goodsId:id,
      activeIsOpened:false
    },()=>{
      this.getGoodsInfo()
    })
  }
  //购物车数量减减
  subCardNum=()=>{
    console.log(111)
    let num=this.state.cardNum;
    num-= 1
    this.setState({
      cardNum:num
    },()=>{
      this.addCart()
    })
  }
  //购物车数量加加
  addCardNum=()=>{
    console.log(111)
    let num=this.state.cardNum;
    num+= 1
    this.setState({
      cardNum:num
    },()=>{
      this.addCart()
    })
  }
  //点击加入购物车
  addShopCart=()=>{
    axios.post(api.shopDetail.addCart,qs.stringify({
      goodsId:this.state.goodsId,
      userId:this.state.userId,
      goodsNum:this.state.cardNum
    })).then(res=>{
      console.log('购物车',res)
      this.setState({
        activeIsOpened:false
      })
    })
  }
  //点击模态框里面的立即购买
  buyNow=()=>{
    axios.post(api.shopDetail.buyNow,qs.stringify({
      goodId:this.state.goodsId,
      userId:this.state.userId,
      goodsNumber:this.state.cardNum})).then(res=>{
        console.log('resss',res)
    //  跳到订单页面
      Taro.navigateTo({
        url: '../payOrder/payOrder?userId='+this.state.userId+'&data='+JSON.stringify([{goodsId:this.state.goodsId,goodsNumber:this.state.cardNum}])
      })
    })
  }
  //加入购物车
  addCart=()=>{
    let str=this.state.tanContent.map(item=>{
      return(
        <div>
          <div className='sizeHeader'>
            <div className='sizeHeaderTitle'>{this.state.selectInfo[this.state.sizeIndex].goodsName}</div>
            <div>
              <div className='sizeHeaderPrice'>
                ￥{this.state.selectInfo[this.state.sizeIndex].goodsRealPrice}
              </div>
              <div className='sizeNum'>
                库存 <span>{this.state.selectInfo[this.state.sizeIndex].goodsNumber}</span>件
              </div>
            </div>
          </div>
          <div>颜色分类</div>
          <div className='colorImg'>
            {this.state.selectInfo.map((item,index)=>{
              return (
                <div className='colorItem' onClick={()=>{this.selSize(index)}}>
                  <div>
                    <Image
                      style={'width:100px;height:100px;border: 1px solid white'}
                      src={'http://172.17.6.224:8085'+item.picOne}/>
                  </div>
                  <div className='colorTitle'>
                    {item.goodsColor}
                  </div>
                </div>
              )
            })
            }
          </div>
          <div>尺码</div>
          <div className='sizeAll'>
            { this.state.isClickSize===false && this.state.selectInfo.map(item=>{
              return(
                <div>
                  {item.goodsSize}
                </div>
              )
            })}
            {this.state.isClickSize===true && <div>{this.state.selectInfo[this.state.sizeIndex].goodsSize}</div>}
          </div>
          <div className='cardNum'>
            <div onClick={this.subCardNum}>
              <AtButton>-</AtButton>
            </div>
            <div>{this.state.cardNum}</div>
            <div onClick={this.addCardNum}>
              <AtButton>+</AtButton>
            </div>
          </div>
          <div className='footerBut cartMotal'>
            <div className='addCart addCartMotal' onClick={this.addShopCart}>
              <AtButton circle>加入购物车</AtButton>
            </div>
            <div className='buyNow' onClick={this.buyNow}>
              <AtButton circle>立即购买</AtButton>
            </div>
          </div>
        </div>
      )
    })
    this.setState({
      activeIsOpened:true,
      tanContent:str,
      motalTile:'加入购物车',
      isMotal:'购物车'
    })
  }
  //返回上一页
  pageBack=()=>{
    Taro.navigateBack({
      delta:1
    })
  }
  // //得到数据
  async getGoodsInfo(){
    //商品数据
    axios.get(api.shopDetail.shopDetail,{
      params:{
        goodsId: this.state.goodsId,
      }
    }).then(res=>{
      if(res.data.code==200){
        let num=res.data.data
        //得到商品信息
        let arr = num.goodsPic.split(',').map((item)=>{
          if(item!=''){
            return (
              <SwiperItem>
                <View className='demo-text-1'>
                  <Image
                    style={'width:100%;height: 100%'}
                    src={'http://172.17.6.224:8085'+ item}/>
                </View>
              </SwiperItem>
            )
          }
        })
        let arr2 = num.goodsDescText.split(',').map(item=>{
          if(item!=''){
            return(
              <Image
                style={'width:100%'}
                mode='widthFix'
                src={'http://172.17.6.224:8085'+item}/>
            )
          }
        })
        this.setState({
          goodsName:num.goodsName,
          goodsRealPrice:num.goodsRealPrice,
          goodsSellNumber:num.goodsSellNumber,
          lunboArr:arr,
          goodsDescText:arr2
        })
      }
    })
  //  评论
    axios.get(api.shopDetail.comment,{
      params:{
        goodsId: this.state.goodsId
      }
    }).then(res=>{
      if(res.data.code==100){
        this.setState({
          pinlun:'暂时还没有评论~'
        })
      }
    })
  //
    axios.get(api.shopDetail.shopStore+this.state.goodsId).then(res=>{
      if(res.data.code==200){
        let str=res.data.data
        this.setState({
          shopAddress:str.shopAddress,
          shopName:str.shopName,
          shopLogo:'http://172.17.6.224:8085'+str.shopLogo
        })
      }
    })
    //  为你推荐
    axios.get(api.shopDetail.tuijian+this.state.goodsId).then(res=>{
      let arr = res.data.data.map(item=>{
        return(
          <div onClick={()=>{this.goodsTuiJian(item.goodsId)}}>
            <Image
              style='width: 100%;height: 150px;background: #fff;'
              src={'http://172.17.6.224:8085'+item.picOne}/>
            <div>
              {item.goodsName}
            </div>
            <div className='buyDetail'>
              <div className='buyPrice'>￥<span>{item.goodsRealPrice}</span></div>
              <div className='buyNum'><span>{item.goodsSellNumber}</span>人购买</div>
              <div><AtButton size='small'>相似</AtButton></div>
            </div>
          </div>
        )
      })
      if(res.data.code==200){
        this.setState({
          tuiJianArr:arr
        })
      }
    })
    await this.getCanShu().then(res=>{
      this.setState({
        selectInfo:res
      })
    })
  }

  async componentWillMount() {
    //得到输入的商品Id
    let id = Current.router.params.shopId
    console.log('11111id',id)
    console.log('222222',Current.router)
    console.log('333333',Current.router.params)
    this.setState({
      goodsId:id
    },()=>{
      this.getGoodsInfo()
    })
    //得到用户ID
    //得到信息
    await this.getCanShu().then(res=>{
      this.setState({
        selectInfo:res
      })
    })
  }

  render () {
    return (
      <div className='container'>
        <div className='pageBack' onClick={this.pageBack}>
          <AtIcon value='chevron-left' size='30' color='#F00'></AtIcon>
        </div>
        {/*//轮播*/}
        <Swiper className='test-h' indicatorColor='#E9ECE5' indicatorActiveColor='#00997F' circular indicatorDots autoplay>
          {this.state.lunboArr}
        </Swiper>
      {/*价格*/}
        <div>
          <div className='shopPrice'>
            <div className='headerLeft'>
              <div>
                ￥{this.state.goodsRealPrice}
              </div>
            </div>
            <div className='headerRight'>
              <div>
                <div>
                  <AtIcon value='heart' size='30' color='#355558'></AtIcon>
                </div>
                收藏
              </div>
              <div>
                <div>
                  <AtIcon value='share' size='30' color='#355558'></AtIcon>
                </div>
                分享
              </div>
            </div>
          </div>
          <div className='headerTitle'>
            {this.state.goodsName}
          </div>
        </div>
      {/*  活动*/}
        <div className='activity'>
          <div className='fahuo'>
            <div>发货</div>
            <div>
              <AtIcon value='map-pin' size='30' color='#F00'></AtIcon>
              {this.state.shopAddress}
            </div>
            <div>
              快递：免运费
            </div>
            <div className='saleVolume'>
              销量：{this.state.goodsSellNumber}
            </div>
          </div>
          <div className='fahuo' onClick={this.activity}>
            <div>活动</div>
            <div className='huodong'>店铺专属满减活动</div>
            <div>></div>
          </div>
        </div>
        {/*  服务*/}
        <div className='activity'>
          <div className='fahuo' onClick={this.serveMotal}>
            <div>服务</div>
            <div className='huodong'>付款后48小时内发货·订单险</div>
            <div>></div>
          </div>
          <div className='fahuo' onClick={this.selectMotal}>
            <div>选择</div>
            <div className='huodong'>请选择尺寸</div>
            <div>></div>
          </div>
          <div className='fahuo' onClick={this.canShuMotal}>
            <div>参数</div>
            <div className='huodong'>品牌 质地...</div>
            <div>></div>
          </div>
        </div>
        {/*  宝贝评价*/}
        <div className='activity'>
          <div className='fahuo'>
            <div>宝贝评价</div>
            <div onClick={this.goToPinLun}>查看全部&nbsp;&nbsp;&nbsp;&nbsp; ></div>
          </div>
          <div className='pinglun'>{this.state.pinlun}</div>
        </div>
        {/*  店铺名字*/}
        <div className='activity'>
          <div className='fahuo'>
            <div>
              <AtAvatar circle image={this.state.shopLogo}></AtAvatar>
            </div>
            <div className='storeName'>{this.state.shopName}</div>
            <div>
              <AtButton circle size='small'>全部宝贝</AtButton>
            </div>
            <div>
              <AtButton circle size='small'>进店逛逛</AtButton>
            </div>
          </div>
        </div>
        {/*  宝贝详情*/}
        <div className='activity'>
          <div className='babeDetail'>宝贝详情</div>
          <div>
            {this.state.goodsDescText}
          </div>
        </div>
        {/*  为你推荐~*/}
        <div className='babe'>
          <div className='recommendForYou'>为你推荐~</div>
          {/*推荐的商品*/}
          <div className='recommend'>
            {this.state.tuiJianArr}
           </div>
        </div>
        {/*  底部*/}
        <div className='activity noMore'>
          <div className='footerMore'>没有更多了~</div>
        </div>
      {/*  加入购物车*/}
        <div className='shopCart'>
          <div className='footerIcon'>
            <div>
              <AtIcon value='shopping-bag' size='30' color='#F00'></AtIcon>
            </div>
            店铺
          </div>
          <div className='footerIcon'>
            <div>
              <AtIcon value='shopping-cart' size='30' color='#F00'></AtIcon>
            </div>
            购物车
          </div>
          <div className='footerIcon'>
            <div>
              <AtIcon value='user' size='30' color='#F00'></AtIcon>
            </div>
            客服
          </div>
          <div className='footerBut'>
            <div className='addCart' onClick={this.addCart}>
              <AtButton>加入购物车</AtButton>
            </div>
            <div className='buyNow' onClick={this.addCart}>
              <AtButton>立即购买</AtButton>
            </div>
          </div>

        </div>
      {/*  弹框*/}
        <AtFloatLayout isOpened={this.state.activeIsOpened} title={this.state.motalTile}>
          {this.state.tanContent}
        </AtFloatLayout>
      </div>
    )
  }
}
export default ShopDetail
